import React, { useState } from 'react'
import Navbar from '../../components/Navbar'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { AntOutline } from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { dosendmsgcode, docheckcode } from "../../apis/reg"
// import { debounce } from '../../utils/debounce'
export default function Code() {
    const location = useLocation();
    const navigate = useNavigate()

    const [bool, setbool] = useState(false)
    const [next, setnext] = useState(true)
    const [word, setword] = useState("发送验证码")

    const onFinish = () => {
        navigate('/password', { state: { tel: location.state.tel } })
    }

    let send = async () => {
        setbool(true)
        let num = 60;
        let time = setInterval(() => {
            setword("倒计时" + num + 's')
            num--
            if (num === 0) {
                clearInterval(time)
                setword("发送验证码")
                setbool(false)
            }
        }, 1000)
        let res = await dosendmsgcode(location.state.tel)
        console.log(res);
    }


    let test = (e: any) => {

        let timer: any = null;
        // 搜索框内容变化时调用

        return () => {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(async () => {
                let res: any = await docheckcode(location.state.tel, e.target.value)
                switch (res.code) {
                    case "200":
                        setnext(false)
                        break;

                    case "10007":
                        
                        // console.log(11);
                        setnext(true)
                        Toast.show({
                            content: res.message,
                            position: 'top',
                        })

                        break;
                    default:
                        setnext(true)
                        break;
                }
            }, 2000)
        }


    }

    // let test = async (e: any) => {
    //     console.log(111);

    //     let res: any = await docheckcode(location.state.tel, e)
    //     switch (res.code) {
    //         case "200":
    //             setnext(false)
    //             break;
    //         case "10007":
    //             console.log(22);

    //             setnext(true)

    //             break;
    //         default:
    //             setnext(true)
    //             break;
    //     }
    // }
    return (
        <div>
            <Navbar title="注册"/>

            <Form onFinish={onFinish}
                style={{ marginTop: '10%', padding: '6px' }}
                layout='horizontal'
                footer={
                    <Button block type='submit' color='danger' size='large' shape='rounded' disabled={next}
                    >
                        下一步
                    </Button>
                }>
                <AntOutline fontSize={48} style={{ margin: "0 auto", marginBottom: "20px", width: "100%" }} />
                <p style={{ fontSize: "14px", textAlign: "center", marginBottom: "20px" }}>我们将以短信形式发给你</p>
                <Form.Item extra={<Button color='primary' fill='outline' disabled={bool} onClick={() => { send() }}>{word}</Button>}>
                    <Input placeholder='请输入短信验证码' clearable onKeyUp={(e) => { test(e)() }} />
                    {/* <Input placeholder='请输入短信验证码' clearable onChange={(e) => { debounce(test(e), 2000) }} /> */}
                </Form.Item>
            </Form>
        </div>
    )
}
